<template>
    <eui-page-frame topHeight="220" bottomHeight="86">
        <template #top>
            <view class="content-img">
                <view class="navigation menu-seach">
                    <eui-nav-bar ref="BcmNavBar" title="选择商品" color="#000000" rightIcon="" />
                    <eui-search-bar ref="BcmSearchBar" placeholder="请输入编码/条码/名称" @confirm="searchConfirm">
                    </eui-search-bar>
                </view>
            </view>
        </template>
        <eui-page-content>
            <view class="list-card" v-bind:style="{ height: c_height }">
                <scroll-view scroll-y="true" class="bg-white list-card-content"
                    style="width: 100%;box-sizing: border-box;overflow-y: scroll;" @refresherrefresh="templateUpper"
                    @scrolltolower="templateLower" refresher-enabled='true' :refresher-triggered="triggered">
                    <view class="flex">
                        <radio-group @change="radioChange">
                            <label class="goods-item" v-for="(item, index) in lists" :key="index">
                                <radio :value="item.id" v-bind:checked="current == item.id ? true : false" style="" />
                                <view class="flex" style="align-items: baseline;flex: 1;">
                                    <view
                                        style="width: 40rpx;height: 40rpx;text-align: center;line-height: 40rpx;background-color: #D8D8D8;color: #fff;border-radius: 40rpx;font-size: 28rpx;margin-right: 15rpx;">
                                        {{ index + 1 }}
                                    </view>
                                    <view style="font-size: 32rpx;flex: 1;">
                                        <view class="goods-name">{{ item.goodsName }}</view>
                                        <view style="color: #626262;">
                                            {{ item.goodsCode }}-{{ item.goodsBarcode }}
                                        </view>
                                        <view style="color: #626262;">
                                            {{ item.skuCode ?? item.code }}
                                        </view>
                                        <view class="flex just-between" style="font-size: 32rpx;">
                                            <view class="flex just-between" style="flex: 1">
                                                <view style="text-align: left;"><text
                                                        style="color: #626262;font-size: 25rpx;">原价</text><text
                                                        class="bold">{{
                        formatPrice(item.originPrice) }}</text></view>
                                                <view style="margin-left: 20rpx;text-align: right;"><text
                                                        style="color: #626262;font-size: 25rpx;">促销价</text><text
                                                        class="bold">{{
                        formatPrice(item.actualPrice) }}</text></view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </label>
                        </radio-group>
                    </view>
                </scroll-view>
            </view>
        </eui-page-content>
        <template v-slot:bottom>
            <eui-button title="确认" type="max" singleTag="confirm"
                style="width: 100%;height: 86rpx;line-height: 86rpx;margin: 0!important;border-radius: 0;padding:0;"
                @buttonClick="buttonClick" :disabled="!current"></eui-button>
        </template>
    </eui-page-frame>
</template>
<script setup type="">
import { ref, reactive, onMounted } from 'vue';
import service from '@/common/service';
import { getBcmUrl, bcmRequest } from '../../../../hooks/bcmServices';
import { formatPrice } from '../../../../hooks/bcmUseUntils'
import { onLoad, onShow } from "@dcloudio/uni-app";

const bcmUrl = getBcmUrl()

const CurrentPage = ref(1)
const PageSize = ref(50)
const RowsCount = ref(0)
const lists = ref([])
const PageCount = ref(0)
let triggered = false
const formData = ref({ code: '' })
const storeCode = ref('')
const chnlType = ref('')
const current = ref('')
const c_height = ref(0)
const orderGoodsRow = ref(-1)


onLoad((options) => {
    if (options.storeCode) {
        storeCode.value = options.storeCode;
        chnlType.value = options.chnlType;
        orderGoodsRow.value = options.rowNo;
    }
})

onMounted(() => {
    setTimeout(() => {
        GetList();
    }, 500);
})

onShow(() => {
    setTimeout(() => {
        uni.getSystemInfo({
            success: res => {
                const query = uni.createSelectorQuery().in(this);
                query.select('.menu-seach').boundingClientRect(data => {
                    c_height.value = (res.windowHeight - data.height - 60) + 'px';
                }).exec();
            }
        });
    }, 1000)
})

const searchConfirm = async function (e) {
    formData.value.code = e.value;
    await GetList();
}

const radioChange = function (evt) {
    current.value = evt.detail.value
}
// 加载更多
const templateLower = () => {
    if (CurrentPage.value < PageCount.value) {
        CurrentPage.value = CurrentPage.value + 1;
        GetList();
    }
}
// 下拉刷新
const templateUpper = function () {
    if (!triggered) {
        triggered = true;
        CurrentPage.value = 1;
        GetList();
        setTimeout(() => {
            triggered = false;
        }, 600)
    }
}
const GetList = async function () {
    service.enjoyShowLoading('正在查询...');
    let whereList = [{
        c_col: "goodsName",
        c_oper: "相似",
        c_value: formData.value.code,
        c_logic: "或者",
        c_left: "(",
        c_right: ""
    }, {
        c_col: "key",
        c_oper: "等于",
        c_value: formData.value.code,
        c_logic: "而且",
        c_left: "",
        c_right: ")"
    }], initWhereList = [{ c_col: "storeCode", c_oper: "等于", c_value: storeCode.value },
    { c_col: "chnlType", c_oper: "等于", c_value: chnlType.value },
        // { c_col: 'shelvesStatus', c_oper: '等于', c_value: '1' },
        // { c_col: 'saleStatus', c_oper: '等于', c_value: '1' },
        // { c_col: 'thirdGoodsCode', c_oper: '不为空' },
        // { c_col: 'thirdGoodsCode', c_oper: '不等于', c_value: '' },
        // { c_col: 'stock', c_oper: '大于', c_value: '0' }
    ]
    const req = {
        IsNotPage: false,
        PageSize: PageSize.value,
        CurrentPage: CurrentPage.value,
        extras: {
            isQueryActualPrice: true
        },
        WhereList: formData.value.code ? whereList.concat(initWhereList) : initWhereList
    };
    const response = await bcmRequest(bcmUrl.managerApi, '店铺商品表', 'EnjoyQuerySkuList', req);
    service.enjoyHideLoading();
    CurrentPage.value = response.CurrentPage; //第几页
    PageSize.value = response.PageSize; //每页10条
    RowsCount.value = response.RowsCount; //总条数
    PageCount.value = response.PageCount; //总页数
    if (response.CurrentPage == 1) {
        lists.value = response.ReturnObject;
    } else {
        lists.value = lists.concat(response.ReturnObject);
    }
}
const buttonClick = async (t) => {
    const { singleTag } = t
    switch (singleTag) {
        case 'confirm':
            let index = lists.value.findIndex(v => v.id == current.value);
            // console.log(index, 'index', current.value)
            AddSelectDataToPrePage({
                type: 'goodsItem',
                goodsInfo: lists.value[index],
                orderGoodsRow: orderGoodsRow.value
            })
            break;
    }
}
const onBackPress = function (options) {
    if (options.from === 'backbutton') {
        // if(!loginInfo.sUserStore){
        // 	uni.showToast({  duration:3500,
        // 		icon: 'none',
        // 		title: '请先勾选机构！'
        // 	});
        // 	return true;
        // }
        return false;
        // 阻止返回（安卓返回按钮）
    } else {
        return false;
    }
}

// 带上选择的数据返回上级
const AddSelectDataToPrePage = (param) => {
    //通知上一界面刷新
    if (param) {
        try {
            let pages = getCurrentPages(); //获取所有页面栈实例列表
            let prevPage = pages[pages.length - 2]; //上一页页面实例
            prevPage.$vm.$.exposed.SelectionChanged(param); //执行函数也是同理
            uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
                delta: 1
            });
        } catch (e) {
            console.log(JSON.stringify(e));
            //TODO handle the exception
        }
    }
}


</script>
<style lang="scss" scoped>
@import "@/static/font/enjoyicon/iconfont.css";
@import "@/static/font/menu/iconfont.css";
@import "../../common/common.css";

.content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 !important;
    background-color: #f2f2f2;
    ;
}

.content-img {
    width: 100%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 100% 420rpx;
}

.navigation {
    flex: 0 0 auto;
    margin-bottom: 5px;
}

.list-card {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
}

.list-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    padding: 0rpx 28rpx;
}

.goods-item {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 12rpx 8rpx;
    border-bottom: 1rpx solid #e1e1e1;
}

.goods-name {
    flex: 1;
    margin-bottom: 2px;
    font-size: 32rpx;
    line-height: 35rpx;
    ;
}

uni-radio-group {
    display: block;
    width: 100%;
}

uni-button:after {
    border: none;
}

.li-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
